<template>
  <transition name="fade-slide">
    <div v-if="visible" class="message-toast" :class="type">
      {{ message }}
    </div>
  </transition>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  name: 'MessageToast',
  props: {
    message: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'info'
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  setup(props) {
    const visible = ref(false)

    onMounted(() => {
      // 显示消息
      visible.value = true
      
      // 设置定时器自动关闭
      const timer = setTimeout(() => {
        visible.value = false
      }, props.duration)
      
      // 清理定时器
      onUnmounted(() => {
        clearTimeout(timer)
      })
    })

    return {
      visible
    }
  }
}
</script>

<style scoped>
.message-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  z-index: 3000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  text-align: center;
  max-width: 90%;
  word-wrap: break-word;
}

/* 动画效果 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.9);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translate(-50%, -40%) scale(0.95);
}

.message-toast.info {
  background-color: #1890ff;
}

.message-toast.warning {
  background-color: #faad14;
}

.message-toast.error {
  background-color: #ff4d4f;
}

.message-toast.success {
  background-color: #52c41a;
}

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) {
  .message-toast {
    padding: 14px 24px;
    font-size: 16px;
    min-width: 240px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 480px) {
  .message-toast {
    padding: 12px 20px;
    font-size: 15px;
    min-width: 200px;
    max-width: 95%;
  }
}
</style>